<template>
  <div>
    <div class="table">
      <div class="header">
        <el-button @click="exportData" size="small">导出表格</el-button>
      </div>
      <el-table :data="tableData" border stripe highlight-current-row lazy>
        <el-table-column type="index" label="#" width="100"></el-table-column>
        <el-table-column label="订单编号" prop="order_name" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column label="订单价格" prop="price" width="100"></el-table-column>
        <el-table-column label="订单重量" prop="order_weight" width="100"></el-table-column>
        <el-table-column label="订单数量" prop="num" width="100"></el-table-column>
        <el-table-column label="是否发货" prop="is_send" width="100"></el-table-column>
        <el-table-column label="下单时间" prop="order_time">
          <template slot-scope="scope">
            {{ scope.row.order_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { export2Excel } from '../../common/js/util'

export default {
  name: 'FirstProjectTable',

  data() {
    return {
      columns: [
        //定义表头
        { title: '订单编号', key: 'order_name' },
        { title: '订单价格', key: 'price' },
        { title: '订单重量', key: 'order_weight' },
        { title: '订单数量', key: 'num' },
        { title: '是否发货', key: 'is_send' },
        { title: '下单时间', key: 'order_time' },
        { title: '地址', key: 'address' }
      ],
      tableData: []
    }
  },

  mounted() {},

  methods: {
    /**
     * 导出
     */
    exportData() {
      // export2Excel('表头','需要导出的数据')
      export2Excel(this.columns, this.tableData, '用户列表')
    },
    async getOrderList() {
      const { data: res } = await this.$http.get('/order/getOrderList')
      console.log(res)
      this.tableData = res.data
      this.totalPage = res.total

      // console.log(res)
    }
  },
  created() {
    this.getOrderList()
  }
}
</script>

<style lang="scss" scoped>
.el-button {
  margin-left: 45%;
  margin-bottom: 20px;
}
</style>
